<template>
  <div>
    <van-nav-bar
      title="公共设施预约"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
      fixed
      safe-area-inset-top
    />
    <!--预约时间段、预约日期-->
    <div>
      <van-field
        readonly
        clickable
        label="预约日期"
        :value="datevalue"
        placeholder="选择预约日期"
        @click="dateshowPicker = true"
      />
      <van-popup v-model="dateshowPicker" round position="bottom">
        <van-picker
          show-toolbar
          :columns="datecolumns"
          @cancel="dateshowPicker = false"
          @confirm="dateonConfirm"
        />
      </van-popup>
      <van-form @submit="onSubmit">
        <van-field
          readonly
          clickable
          label="开始时间"
          :value="startvalue"
          placeholder="选择开始时间"
          @click="startshowPicker = true"
        />
        <van-popup v-model="startshowPicker" round position="bottom">
          <van-picker
            show-toolbar
            :columns="columns"
            @cancel="startshowPicker = false"
            @confirm="startonConfirm"
          />
        </van-popup>
        <van-field
          readonly
          clickable
          label="结束时间"
          :value="endvalue"
          placeholder="选择结束时间"
          @click="endshowPicker = true"
        />
        <van-popup v-model="endshowPicker" round position="bottom">
          <van-picker
            show-toolbar
            :columns="columns"
            @cancel="endshowPicker = false"
            @confirm="endonConfirm"
          />
        </van-popup>

        <div style="margin: 16px">
          <van-button round block type="info" native-type="submit"
            >提交</van-button
          >
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
export default {
  name: "orderpublic",
  data() {
    return {
      startvalue: "",
      starttime: 0,
      startshowPicker: false,
      endvalue: "",
      endtime: 1,
      endshowPicker: false,
      columns: [
        "00:00",
        "01:00",
        "02:00",
        "03:00",
        "04:00",
        "05:00",
        "06:00",
        "07:00",
        "08:00",
        "09:00",
        "10:00",
        "11:00",
        "12:00",
        "13:00",
        "14:00",
        "15:00",
        "16:00",
        "17:00",
        "18:00",
        "19:00",
        "20:00",
        "21:00",
        "22:00",
        "23:00",
        "23:59",
      ],
      datecolumns: ["", ""],
      datevalue: "",
      orderdate: 1,
      dateshowPicker: false,
      nowpublicdata: [],
    };
  },

  computed: {},
  created() {
    this.getinitdata();
    let day1 = new Date();
    this.datecolumns[0] =
      day1.getFullYear() +
      "-" +
      (day1.getMonth() + 1) +
      "-" +
      day1.getDate() +
      "(今天)";
    day1.setDate(day1.getDate() + 1);
    this.datecolumns[1] =
      day1.getFullYear() +
      "-" +
      (day1.getMonth() + 1) +
      "-" +
      day1.getDate() +
      "(今天)";
  },

  methods: {
    getinitdata() {
      this.HttpManager.publicroom_serchbypid(sessionStorage.getItem("nowpid"))
        .then((res) => {
          if (res.code != 0) this.$notify({ type: "danger", message: res.msg });
          else {
            this.nowpublicdata = res.data;
          }
        })
        .catch((err) => {
          console.log(err);
          this.$router.replace("/");
        });
    },
    onSubmit(values) {
      console.log("submit", values);
      let resdata = {
        starttime: this.starttime,
        endtime: this.endtime,
        uid: sessionStorage.getItem("userid"),
        pid: sessionStorage.getItem("nowpid"),
        date: this.orderdate,
        name: sessionStorage.getItem("username"),
      };
      this.HttpManager.publicapply_insert(resdata)
        .then((res) => {
          if (res.code != 0) this.$notify({ type: "danger", message: res.msg });
          else {
            this.$Toast.success("预约成功");
            setTimeout(() => {
              this.onClickLeft();
            }, 2000);
          }
        })
        .catch((err) => {
          console.log(err);
          this.$router.replace("/");
        });
    },
    onClickLeft() {
      this.$router.replace("/publicshow");
    },
    startonConfirm(value, index) {
      this.startvalue = value;
      this.starttime = index;
      this.startshowPicker = false;
    },
    endonConfirm(value, index) {
      this.endvalue = value;
      this.endtime = index;
      this.endshowPicker = false;
    },
    dateonConfirm(value, index) {
      this.datevalue = value;
      this.orderdate = index;
      this.dateshowPicker = false;
    },
  },
};
</script>
<style scoped>
</style>
